<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:include href="../template/template.xsl"/>
    
    <xsl:output method="html"/>
    
    <xsl:template match="/">
        <html xmlns="http://www.w3.org/1999/xhtml">
            <xsl:call-template name="header"/>
            
            <body class="metro">
                <div id="wrapper">
                    <xsl:call-template name="menu"/>
                    
                    <div id="page-wrapper">
                        <ol class="breadcrumb">
                            <li>
                                <a href="index.html"><i class="fa fa-home"></i> Accueil</a>
                            </li>
                            <li class="active">
                                <i class="fa fa-search"></i> Recherche
                            </li>
                        </ol>
                        
                        <div class="page-header">
                            <h3>Rechercher un hôtel</h3>
                        </div>
                        <p>
                            Ce module vous permet de rechercher facilement un hôtel dans notre base de données.
                        </p>
                        
                        <fieldset>
                            <legend>Critère de recherche</legend>
                            <form class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label for="nom" class="col-sm-2 control-label">Nom de l'hôtel</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="nom" placeholder="Nom de l'hôtel"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="langues" class="col-sm-2 control-label">Langues</label>
                                    <div class="col-sm-10">
                                        <select class="form-control" id="langues" name="langues">
                                            <option value="">-------------</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="notes" class="col-sm-2 control-label">Notes</label>
                                    <div class="col-sm-10">
                                        <select class="form-control" id="notes" name="notes">
                                            <option value="">-------------</option>
                                            <option value="0">0 étoile</option>
                                            <option value="1">1 étoile</option>
                                            <option value="2">2 étoiles</option>
                                            <option value="3">3 étoiles</option>
                                            <option value="4">4 étoiles</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="notes" class="col-sm-2 control-label">Prix de la chambre</label>
                                    <div class="col-sm-10">
                                        <div style="width: 100%;">
                                            <div class="min_slider_prix" style="float: left; margin-right: 35px;"></div>
                                            <div class="slider" style="width: 50%; margin-right: 35px;"></div>
                                            <div class="max_slider_prix" style="float: right;"></div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </fieldset>
                        <fieldset>
                            <legend>Résultat</legend>
                        </fieldset>
                        
                        <table id="listeHotels" class="table striped">
                            <thead>
                                <tr>
                                    <th>Nom</th>
                                    <th>Prix minimum</th>
                                    <th>Prix maximum</th>
                                    <th>Catégorie</th>
                                    <th>Note</th>
                                    <th>Langues parlées</th>
                                </tr>
                            </thead>
                            <tbody>
                        
                            </tbody>
                            <tfoot>
                        
                            </tfoot>
                        </table>
                    </div>
                </div>
                
                <xsl:call-template name="footer"/>
                
                <script type='text/javascript' src='js/slider.js'></script>
                <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
                <script type='text/javascript' src='js/morris.min.js'></script>
                <script type='text/javascript' src='js/recherche.js'></script>
            
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>